<template>
    <div>
        <el-header style="text-align: right;margin-right: 60px">
            <el-row>
                <el-col :span="12">
                    <h1 style="text-align: left;line-height: 35.6px">{{shopName}}</h1>
                </el-col>
                <el-col :span="12">
                    <el-button size="medium" type="success" @click="OpenAddDish" >增加
                    </el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-table
                :data="tableData"
                style="line-height:20px;"
                :cell-style="rowStyle"
                :header-cell-style="{'text-align':'center'}"
                :stripe="true">
            <el-table-column prop="number" label="菜品编号" width="140"></el-table-column>
            <el-table-column prop="name" label="菜品名称" width="85"></el-table-column>
            <el-table-column label="菜品图片"  width="120">
              <template slot-scope="scope">
                <img :src="scope.row.picture" width="40" height="40" class="head_pic" alt=""/>
              </template>
            </el-table-column>
            <el-table-column prop="taste" label="口味" width="120"></el-table-column>
            <el-table-column prop="price" label="价格" width="90"></el-table-column>
            <el-table-column prop="salesVolume" label="销量"  width="120"></el-table-column>
            <el-table-column prop="states" label="菜品状态" :formatter="realstate" width="130"></el-table-column>
            <el-table-column label="操作" fixed="right" width="230px">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="updateDish(scope.row)" >修改</el-button>
                    <el-button size="mini" type="danger" @click="deleteDish(scope.row)" >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block" style="text-align: center">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page.sync="pageNum"
                :page-size="10"
                layout="total, prev, pager, next"
                :total="list1.length">
            </el-pagination>
        </div>
      <el-button :plain="true" @click="open2()" Style="display:none">成功</el-button>
      <el-button :plain="true" @click="open3()" Style="display:none">成功</el-button>

<!--      增加的弹出框-->
      <el-dialog title="新增菜品" :visible.sync="addDishActive" width="35%" style="text-align: center">
        <el-form :model="dish" ref="addForm" :rules="rules">
          <el-form-item label="菜品名称" :label-width="'90px'" style="text-align: left">
            <el-input v-model="dish.name"  placeholder="请输入菜名"></el-input>
          </el-form-item>
          <el-form-item label="口味" :label-width="'90px'" style="text-align: left">
            <el-input v-model="dish.taste"  placeholder="请输入口味"></el-input>
          </el-form-item>
          <el-form-item label="价格" :label-width="'90px'" style="text-align: left">
            <el-input v-model="dish.price"  placeholder="请输入价格"></el-input>
          </el-form-item>
          <el-form-item label="菜品图片">
            <img :src="dish.picture" alt="" style="width: 160px;height: 160px" >
            <el-upload class="upload-demo" ref="upload"
                       action=""
                       accept="image/jpg,image/jpeg,image/png"
                       :file-list="fileList"
                       :auto-upload="false"
                       :on-change="mychange"
                       :limit="1"
                       :on-success="uploadsuccess" :before-upload="beforUpload"
                       :on-error="uploadError">
              <el-button slot="trigger" size="small" type="primary">更改图片</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="菜品类型">
            <el-select v-model="dish.type" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.type"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDishActive = false;dish = {}">取 消</el-button>
          <el-button type="primary" @click="onsubmitForm('addForm')">确 定</el-button>
        </div>
      </el-dialog>

<!--      修改的弹出框-->
      <el-dialog title="修改菜品" :visible.sync="updateDishActive" width="35%" style="text-align: center">
        <el-form :model="dish" ref="updateForm" :rules="rules">
          <el-form-item label="菜品名称" :label-width="'90px'" style="text-align: left">
            <el-input v-model="dish.name"  placeholder="请输入菜名"></el-input>
          </el-form-item>
          <el-form-item label="口味" :label-width="'90px'" style="text-align: left">
            <el-input v-model="dish.taste"  placeholder="请输入口味"></el-input>
          </el-form-item>
          <el-form-item label="价格" :label-width="'90px'" style="text-align: left">
            <el-input v-model="dish.price"  placeholder="请输入价格"></el-input>
          </el-form-item>
          <el-form-item label="菜品图片">
            <img :src="dish.picture" alt="" style="width: 160px;height: 160px">
            <el-upload class="upload-demo" ref="upload"
                       action=""
                       accept="image/jpg,image/jpeg,image/png"
                       :file-list="fileList"
                       :auto-upload="false"
                       :on-change="mychange"
                       :limit="1"
                       :on-success="uploadsuccess" :before-upload="beforUpload"
                       :on-error="uploadError">
              <el-button slot="trigger" size="small" type="primary">更改图片</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="菜品类型">
            <el-select v-model="dish.type" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.type"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="updateDishActive = false;dish={}">取 消</el-button>
          <el-button type="primary" @click="onsubmitForm2('updateForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>

</template>

<script>
import dish from "@/api/dish";
export default {
  props:[
    'number'
  ],
  data(){
    return{
      proofImage:'',
      dialogImageUrl:'',
      list:[],
      goodList:[],
      tableData:[],
      list1:[],
      pageNum:1,
      addDishActive:false,
      updateDishActive:false,
      flag:false,
      fileList:[],
      dish:{
        name:'',
        picture:'',
        taste:'',
        type:'',
        price:0.00,
        sid:0,
        // sid:sessionStorage.getItem("sid"),
      },
      options:[],
      rules:{
        name:{required: true, message: '菜品名称不能为空',trigger: 'blur'},
        taste: {required: true, message: '口味不能为空',trigger: 'blur'},
      },
      shopName:JSON.parse(sessionStorage.getItem('users')).shopname
    }
  },
  methods: {
    realstate(row) {
      if (row.states === 1) {
        return '上架中'
      } else {
        return '已下架'
      }
    },
    rowStyle() {
      return "text-align:center";
    },
    open2() {
      this.$message({
        message: '删除成功',
        type: 'success'
      });
    },
    open3() {
      this.$message({
        message: '增加成功',
        type: 'success'
      });
    },
    //查询所有菜品信息，按店铺id查询
    findAllDish() {
      // console.log(this.user)
      //取sid  店铺id
      this.dish.sid = JSON.parse(sessionStorage.getItem('users')).sid;
      dish.findBySid(this.dish.sid).then((response) => {
        console.log(response.data.data)
        this.list1 = response.data.data;
        this.tableData = this.list1.slice(this.pageNum - 1, 10)
      })
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.tableData = this.list1.slice((this.pageNum - 1) * 10, this.pageNum * 10)
    },
    OpenAddDish(){
      dish.findAllDishType().then((response)=>{
        this.options = response.data.data
      })
      this.addDishActive = true;
    },
    onsubmitForm(formName){
      let that = this;
      this.$refs[formName].validate((valid)=>{
        if (valid){
          dish.addDish(that.dish).then(response=>{
            if (response.data.data>0){
              that.open3();
              that.findAllDish();
            }else{
              that.$message({
                message: '评价失败，请稍后尝试',
                type: 'warning'
              });
            }
            that.addDishActive = false;
            that.dsh = {};
          })
        }else{
          this.$message({
            message: '新增失败',
            type: 'warning'
          });
        }
      })
    },
    onsubmitForm2(formName){
      let that = this;
      this.$refs[formName].validate((valid)=>{
        if (valid){
          dish.updateById(that.dish).then(response=>{
            if (response.data.data>0){
              that.open3();
              that.findAllDish();
            }else{
              that.$message({
                message: '评价失败，请稍后尝试',
                type: 'warning'
              });
            }
            that.updateDishActive = false;
            that.dsh = {};
          })
        }else{
          this.$message({
            message: '新增失败',
            type: 'warning'
          });
        }
      })
    },
    updateDish(row){
      this.updateDishActive = true;
      this.dish = row;
      dish.findAllDishType().then((response)=>{
        this.options = response.data.data
      })

    },
    //删除菜品信息，即下架该菜品
    deleteDish(row) {
      dish.updateStatesById(row.id).then((response) => {
        if (response.data.data > 0) {
          this.open2();
          this.findAllDish();
        }
      })
    },
    //############################图片上传###################################
    //===========文件上传============

    mychange(file,fileList){
      this.getBase64(file.raw).then(res=>{
        this.dish.picture = res
      })

    },
    getBase64(file){
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    uploadsuccess(response){
      this.flag = true;
      this.$refs.upload.clearFiles();
      this.open3();
    },
    uploadError(){
      this.flag = false;
      this.open4();
    },
    beforUpload(file){
      if(!(file.type==='image/png')&&!(file.type==='image/jpeg')&&!(file.type==='image/jpg')){
        this.$message.error('只能上传图片')
        return false
      }
    },
    //==================================
  },
  created() {
    this.findAllDish();
  },

}
</script>

<style scoped>
.image{
  width: 160px;
  height: 160px;
  border-radius: 4px;
}
.title{
  color: #606266
}
p{
  color: #606266;
  line-height: 30px;
}
.pdiv{
  position:absolute;
  bottom:0;
  line-height: 25px;
  font-size: 17px
}
.el-divider--horizontal{
  width: 80%;
  margin: 24px auto;
}
.el-input-number{
  margin-right: 20px;
  position: absolute;
  right: 30px;
  bottom: 10px;
}
::v-deep .el-table--fit{
    height: 463px;
}
::v-deep .el-table__body-wrapper{
    height: 414px;
}
</style>